<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-17 09:45:43
 * @LastEditTime: 2025-08-06 21:15:29
 * @LastEditors: sueRimn
-->

<template>
  <view class="wrap" :id="'attr-item-' + attrIndex" :class="[
    step === attrIndex ? 'h' : '',
    ((step === attrIndex) && !attrItem.isMultiSelect) || change == attrIndex ? 'current' : '',
    step >= attrIndex ? 'show' : 'open',
    attrItem.isMultiSelect?'last-item':''
  ]">
    <view class="item">
      <view class="header">
        <view class="name">
          {{ attrIndex + 1 }}.{{ attrItem.attrName }}
          <uni-icons type="help" size="18" color="#999" class="question-icon"
            @click="$emit('handleTips', attrItem.tipsData)" v-if="attrItem&&attrItem.tipsData&&attrItem.tipsData.popupType==1"></uni-icons>
        </view>

        <block v-if="!attrItem.isMultiSelect && (step > attrIndex)">
          
          <view class="modify" @click="$emit('handleClickChange', attrIndex)" v-if="change != attrIndex">
            <text class="select">
            {{ returnShowAswer }}
          </text>
          <image src="@/static/images/icon/icon_expand@2x.png" mode="aspectFill" class="expand-icon"></image>
          </view>
        </block>

      </view>
      <view class="options" v-if="attrItem.attrValues && (step === attrIndex || change === attrIndex)"
        :class="attrItem.isMultiSelect ? 'multi-options' : ''">
        <view class="item-wrap" v-for="valueItem in attrItem.attrValues" :key="valueItem.valueId">
          <view class="option-item d-flex justify-content-center align-items-center flex-column"
            @click="$emit('handelSelect', attrItem.isMultiSelect, attrItem.attrId,attrItem.evaluateType, valueItem)"
            :class="(returnIsSelected(valueItem.valueId) ? 'active' : '') + ' option-item-tip-' + (valueItem.tipsData ? valueItem.tipsData.popupType : 0)">
            <!-- tips内容1:问题 问号+弹窗  2:答案 提示 3:答案 问号+提示+底部弹窗 4：答案 图片+提示+底部弹窗 5：答案 图标+提示+底部弹窗 6：答案 禁止点击 -->
            <view class="value value2" v-if="valueItem.tipsData && valueItem.tipsData.popupType == 2">{{ valueItem.valueContent }}
              <view class="value-text">{{ valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.text }}</view>
            </view>
            <view class="value value3" v-else-if="valueItem.tipsData && valueItem.tipsData.popupType == 3">
              <view @click.stop="$emit('handleTips', valueItem.tipsData)">
                <uni-icons type="help" size="24" color="#999" class="answer-icon"></uni-icons>
              </view>
              <view>
                {{ valueItem.valueContent }}
                <view class="value-text">{{ valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.text }}</view>
              </view>
            </view>
            <view class="value value6" v-else-if="valueItem.tipsData && valueItem.tipsData.popupType == 6"
              @click.stop="$emit('handleTips', valueItem.tipsData)">{{ valueItem.valueContent }}
              <view class="value-text">{{ valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.text }}</view>
            </view>
            <view class="value value5" v-else-if="valueItem.tipsData && valueItem.tipsData.popupType == 5">
              <view class="value-icon-box">
                <view class="value-icon">
                <common-image :src="valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.icon" :styles="'width: 60rpx;height: 60rpx;'" />
                </view>
                <view class="value-select-icon">
                <common-image :src="valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.selectIcon"  :styles="'width: 60rpx;height: 60rpx;'" />
              </view>
              </view>
              <view class="icon-value">{{ valueItem.valueContent }}</view>
            </view>
            <view class="value value4" v-else-if="valueItem.tipsData && valueItem.tipsData.popupType == 4">
              <view class="value-image-left" @click.stop="$emit('handleTips', valueItem.tipsData)">
                <common-image :src="valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.image" class="value-image" :styles="'width:116rpx;height:116rpx;'" />
              </view>
              <view class="value-image-right">
                <view>
                  {{ valueItem.valueContent }}</view>
                <view class="value-text">{{ valueItem.tipsData.popupContent && valueItem.tipsData.popupContent.text }}</view>
              </view>
            </view>
            <view class="value value0" v-else>{{ valueItem.valueContent }}
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>


export default {
  props: {
    attrItem: { type: Object, default: {} },
    attrIndex: { type: Number, default: 0 },
    step: { type: Number, default: 0 },
    change: { type: Number, default: -1 },
    valueList: { type: Array, default: [] },
  },
  options: {
    styleIsolation: 'shared'
  },
  computed: {
    // 返回选中答案
    returnShowAswer: function () {
      const { attrValues } = this.attrItem
      const valueIdList = this.valueList.map(item => { return item.valueId });
      const item = attrValues.find(item => valueIdList.indexOf(item.valueId) !== -1)
      if (item) {
        return (item.valueContent + "_" + this.change).replace("_" + this.change, "")
      }
      return ''
    },

    // 判断有没被选中
    returnIsSelected() {
      return function (valueId) {
        const valueIdList = this.valueList.map(item => { return item.valueId });
        return valueIdList.indexOf(valueId) !== -1
      }
    },

    // skuItemId() {
    //   return this.attrItem.skuItemId
    // }
  },

  watch: {
  },

  data() {
    return {
      questionTip: {},
      answerTip: {},
    }
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: none;
  margin: 0 auto;
  padding: 24rpx 20rpx 0 20rpx;

  &.h {
    min-height: 100%;

  }

  &.show {
    display: block;
  }

  &.open .item {
    padding: 40rpx 32rpx 16rpx 32rpx !important;

  }

  &.current {
    .item {
      // border: solid #f8aa04 1px;
    }
  }
}
.last-item{
  margin-bottom: 120rpx;
}
.item {
  position: relative;
  background: #fff;
  border-radius: 12rpx;
  padding: 40rpx 32rpx;


  .header {
    font-size: var(--hui-font-size-26);
    color: #000;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .question-icon {
      margin: 10rpx 0 0 10rpx;
    }

    .name {
      font-size: var(--hui-font-size-30);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: blod;
      color: var(--hui-color-title);

      span {
        display: block;
      }
    }

  }

  .select {
    font-size: var(--hui-font-size-26);
    line-height: 1em;
    color: var(--hui-color-title);
    margin-right: 8rpx;
  }

  .modify {
    color: var(--hui-color-title);
    .expand-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

.multi-options {
  display: flex;
  flex-wrap: wrap;

  .item-wrap {
    width: 300rpx;

    &:nth-child(odd) {
      margin-right: 20rpx;
    }
    &:nth-child(2) {
      margin-top: 22rpx;
    }
    .option-item {
      .value {
        font-size: 26rpx;
        color: #666;

      }
    }
  }
}

.options {
  .item-wrap {
    padding: 10rpx 0;
    border-radius: 24rpx;
    &:first-child {
      margin-top: 22rpx;
    }
  }

  .option-item {
    padding: 16rpx 30rpx 10rpx;
    border-radius: 12rpx;
    height: 108rpx;
    background: #F6F7F9;



    &.active {
      border: solid 1px var(--hui-button-bg);
      background: #FFF8E6;
      

      .value-icon {
        display: none;
      }

      .value-select-icon {
        display: block;
      }
      .value{
        color: var(--hui-color-title);
      }
      .icon-value{
        color: var(--hui-color-primary);
      }

    }

    .value {
      font-size: 30rpx;
      color: var(--hui-color-title);
      line-height: 38rpx;
      text-align: center;
      display: block;

      .value-text {
        font-size: 26rpx;
        color: #999;
        line-height: 34rpx;
        text-align: center;
        margin-top: 5rpx;
      }

      .answer-icon {
        display: block;
        margin: 15rpx 0rpx 0 0;
        position: relative;
        z-index: 9;
      }

      .value-icon {
        width: 60rpx;
        height: 60rpx;
        margin: 0 auto;
      }
    }

    .value-select-icon {
      width: 60rpx;
      height: 60rpx;
      margin: 0 auto;
      display: none;
    }

    .value-icon-box {
      width: 60rpx;
      height: 60rpx;
    }

    .icon-value {
      width: 170rpx;
      text-align: left;
      margin-left: 10rpx;
      color: #666;
    }

    .value3 {
      display: flex;
    }

    .value5 {
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }

    .value4 {
      display: flex;
      align-items: center;

      .value-image {
        width: 116rpx;
        height: 116rpx;
        border-radius: 12rpx 0 0 12rpx;
      }

      .value-image-left {
        margin-right: 20rpx;
      }

      .value-image-right {
        text-align: left;
      }

      .value-text {
        margin-top: 10rpx;
      }
    }

    .tip {
      font-size: 24rpx;
      color: #666;
      line-height: 34rpx;
      text-align: center;
    }
  }

  .option-item-tip-4 {
    padding: 0;
    height: 123rpx;
    align-items: start !important;
    justify-content: start !important;
  }

  .option-item-tip-6 {
    background-color: #e1e1e1;
    color: #999;

    .value {
      color: #999;

      .value-text {
        color: #aaa;
      }
    }
  }
}
</style>